$(function () {
    //获取table
    let table = $("table:first");
    //获取td
    // let tr_th = $("table:first tr:first");
    // console.log(tr_th);
    //获取添加按钮
    let addBtn = $("table th span[id='add']");
    //获取add、return、alter按钮
    let btnAdd = $("form button[id='btn_add']");
    let btnReturn = $("form button[id='btn_return']");
    let btnAlter = $("form button[id='btn_modify']");
    //获取input
    let inputs = $("form input");
    //获取删除和修改按钮
    let btnModify = $("table:first .sp_modify");
    let btnDelete = $("table:first .sp_delete");
    //
    $.ajax({
        url: "data/employee.json",
        method: "post",
        success: function (data,) {
            let tr;
            load();
            function load() {
                $.each(data, function (index, item) {
                    //创建节点
                    tr = "<tr>\n" +
                        "                    <td>" + item.ID + "</td>\n" +
                        "                    <td>" + item.Name + "</td>\n" +
                        "                    <td>" + item.Age + "</td>\n" +
                        "                    <td>" + item.Salary + "</td>\n" +
                        "                    <td>\n" +
                        "                        <span class=\"sp_delete btn btn-default\">删除</span>\n" +
                        "                        <span class=\"sp_modify btn btn-default\">修改</span>\n" +
                        "                    </td>\n" +
                        "                </tr>";
                    $(table).append(tr);
                });
            }
            //添加
            $(btnAdd).click(function () {
                let currentIndex = $(table).find("tr").length-2;
                console.log(currentIndex);
                data.push({"ID":inputs[0].value,"Name":inputs[1].value,"Age":inputs[2].value,"Salary":inputs[3].value});
                console.log(data);
                $("table:first tr:not(:first)").remove();
                load();
            });
            //清空
            $(btnReturn).click(function () {
                // console.log(3);
                $.each(inputs, function (index, item) {
                    inputs.val("");
                })
            });
            //删除[用这个$("table td")不行，得直接$("table")]
            $("table").on("click", ".sp_delete", function () {
                let currentIndex = $(this).parent().parent().index()-1;
                // $(this).parent().parent().remove();
                // delete data[currentIndex];
                data.splice(currentIndex,1);
                $("table:first tr:not(:first)").remove();
                load();
            });
            //修改
            $("table").on("click", ".sp_modify", function () {
                let currentRow = this.parentElement.parentElement.children;
                let currentIndex = $(this).parent().parent().index()-1;
                //将当前行的值赋值给inputs
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].value = currentRow[i].innerHTML;
                }
                $(btnAlter).click(function () {
                    //对json数据进行修改，即，将inputs的内容传给json
                    let index = 0;
                    $.each(data[currentIndex],function (name,item) {
                        data[currentIndex][name] = inputs[index].value;
                        // console.log(data[currentIndex][name]);
                        index++;
                    });
                    index = 0;
                    //将json数据一一对应，赋值给当前行
                    $.each(data[currentIndex],function (name,item) {
                        currentRow[index].innerHTML = data[currentIndex][name];
                        index++;
                    });
                    index = 0;
                    // $(table).not(tr_th).empty();
                    $("table:first tr:not(:first)").empty();
                    load();
                });
            })
        },
        error: function (jqXHR) {
            //
            console.log(jqXHR.status + ":" + jqXHR.responseText);
        },
        dataType:"json",
        contentType:"application/json"
    })
});